<template>
	<view class="page_main page_render" :class="{ can_show: page_render && render_req }">
		<pagelogin ref="pagelogin" @loginready="pagerefresh" @initcallback="com_pagelogin_initcallback($event)" need_login="1">
			<!-- hasHeight :navstyle="{ background: '#1F1F1F' }" -->
			<diynav ref="diynav" :navstyle="{ background: '#383950' }" isFixed back :title="page_title" hasHeight @settop="set_pagetop($event)"></diynav>

			<!-- <block v-if="page_render"> -->

			<me-tabs v-model="tabCurrentIndex" :tabs="tabBars" :ratio="0.4" :tabheight="50" @settab="set_pagetab($event)" @change="changeTab"></me-tabs>

			<view class="page_content">
				<view class="type_top">
					<view class="cc">
						<image class="bg imgabs" :src="page_show[page_type].src"></image>
						<view class="top_text">
							<view class="t1">
								{{ page_show[page_type].title }}
							</view>
							<view class="tt">状态：{{ page_show[page_type].tips }}</view>
							<view class="tt">生效日期：{{ page_show[page_type].start }}</view>
							<view class="tt">保修截止日期：{{ page_show[page_type].end }}</view>
						</view>
					</view>
				</view>

				<scroll-view
					class="msg_scroll"
					:scroll-y="true"
					:style="{
						height: `calc(100vh - ${change_var.page_content_top}rpx - 296rpx)`,
					}"
				>
					<view class="type_centent">
						<view class="t1">说明</view>
						<view class="t2">
							<rich-text :nodes="formatRichText(page_show[page_type].txt)"></rich-text>
						</view>

						<mybtns ref="mybtns" :navstyle="{ background: '#383950' }" @setbot="set_pagebot($event)">
							<view class="page_btn_bot">
								<view class="btn com_bot_btn flex-center" :class="com_bot_btn_class" @click="openpopup('coupon')">
									<view class="">续保</view>
								</view>
							</view>
						</mybtns>
					</view>
				</scroll-view>
			</view>

			<!-- </block> -->
		</pagelogin>

		<mypopup :on="pagepopup" :popup_type="1" :popup_config="popup_config" @mask_click="hidepopup()">
			<view class="pay_centent">
				<view class="pay_list">
					<view class="pay_item">
						<view class="item_l">续保费用</view>

						<view class="item_r">{{ back_number(unit_price) }}元/年</view>
					</view>

					<view class="pay_item">
						<view class="item_l">续费年份</view>

						<view class="item_r">
							<view class="com_add_less_inp">
								<view @click="chang_number('reduce')" class="icons">
									<image src="/static/images/jianshao.png" mode="widthFix" class="com_add_less_inp_img"></image>
								</view>
								<view class="num_wrap">
									<input
										@blur="chang_number('input')"
										@confirm="chang_number('input')"
										type="number"
										v-model="inp_number"
										:style="{ width: inputWid(inp_number) }"
										class="num_input"
									/>
								</view>
								<view @click="chang_number('add')" class="icons">
									<image src="/static/images/jiahao.png" mode="widthFix" class="com_add_less_inp_img"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pay_btn jj_kt_a">
					<view class="price_show">
						<view class="car_all_total">
							<view class="tt">金额:</view>
							<view class="pp">
								<smallPrice :min="pay_end_price" :r="24" :b="42" :s="24" :m="24" bold :decimal="2"></smallPrice>
							</view>
						</view>
					</view>

					<view class="btn">
						<view class="com_bot_btn is78 flex-center" @click.stop="order_go()">
							<view class="">立即支付</view>
						</view>
					</view>
				</view>
			</view>
		</mypopup>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	data() {
		return {
			change_var: {},

			scrollTop: 0,
			render_component_init: false,
			page_render: false,
			page_title: '设置',
			render_req: false,
			nextreq: true,
			page_form: {
				dev_id: 0,
			},

			page_data: {
				bms_notice_baoxiu: '',
				bms_notice_baoxian: '',
			},
			page_show: {
				renew: {
					title: '保修凭证',
					after_sale_start: '',
					after_sale_end: '',
					src: '/pagesD/static/images/baoxiu.png',
				},
				bx: {
					title: '保险凭证',
					insurance_start: '',
					insurance_end: '',
					src: '/pagesD/static/images/baoxian.png',
				},
			},
			page_type: 'renew',

			pagepopup: false,
			popup_type: 'coupon',
			popup_config: {
				title: '续保',
				title_class: 'flex-center',
			},
			pay_end_price: 0, //待支付的价格
			inp_number: 1,
			unit_price: 0, //单价
			com_bot_btn_class: '',

			tabCurrentIndex: 0,
			tabBars: [
				{
					state: 0,
					title: '保修',
					num: 0,
					key: 'notice_count',
					config_name: 'notice_config',
				},
				{
					state: 1,
					title: '保险',
					num: 0,
					key: 'warn_count',
					config_name: 'warn_config',
				},
			],
		};
	},
	created() {},
	onLoad(o) {
		this.page_form.dev_id = o.dev_id;
	},
	onShow() {
		if (this.page_render) {
			this.pagerefresh(1);
		}
	},
	onHide() {},
	onUnload() {},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onPullDownRefresh() {
		this.pagerefresh(1);
	},
	onShareAppMessage(res) {},
	onShareTimeline(res) {},
	computed: {
		// input输入框宽度自适应
		inputWid() {
			return function (value) {
				let l = String(value).length;
				if (l < 4) {
					return '80rpx';
				} else {
					return `${String(value).length * 26.5}` + 'rpx';
				}
			};
		},
	},
	methods: {
		//页面刷新
		pagerefresh(type = 0) {
			let _this = this;
			let data = _this.page_form;

			function get_info() {
				return new Promise((rs, rj) => {
					_this.com_getdata({
						url: `/device/info`,
						data,
						data_fun: function (res) {
							if (res.state == 1) {
								// _this.page_data = res.data;
								rs({
									type: 'info',
									data: res.data,
								});
							} else {
								rs('get_info');
								// _this.com_msg(res.msg || '网络请求错误');
							}
						},
					});
				});
			}

			function get_baoxiu() {
				return new Promise((rs, rj) => {
					// 保修说明
					_this.com_getdata({
						url: '/base/config',
						data: {
							config_key: 'bms_notice_baoxiu',
						},
						data_fun: function (v) {
							if (v.state == 1) {
								rs({
									type: 'bms_notice_baoxiu',
									data: v.info.config_value,
								});
							} else {
								rs('get_baoxiu');
							}
						},
					});
				});
			}

			function get_baoxian() {
				return new Promise((rs, rj) => {
					// 保险说明
					_this.com_getdata({
						url: '/base/config',
						data: {
							config_key: 'bms_notice_baoxian',
						},
						data_fun: function (v) {
							if (v.state == 1) {
								rs({
									type: 'bms_notice_baoxian',
									data: v.info.config_value,
								});
							} else {
								rs('get_baoxian');
							}
						},
					});
				});
			}

			function get_price() {
				return new Promise((rs, rj) => {
					// 金额接口
					_this.com_getdata({
						url: '/device/renew',
						data,
						data_fun: function (v) {
							if (v.state == 1) {
								rs({
									type: 'renew',
									data: {
										after_sales_price: v.after_sales_price,
										insurance_price: v.insurance_price,
									},
								});
							} else {
								rs('renew');
							}
						},
					});
				});
			}

			Promise.all([get_info(), get_baoxiu(), get_baoxian(), get_price()]).then(res => {
				let fail_arr = ['get_info', 'get_baoxiu', 'get_baoxian', 'renew'];

				res.forEach(item => {
					if (fail_arr.indexOf(item) > -1) {
						// 某个函数请求错误了
					} else {
						let { type, data } = item;

						if (type == 'info') {
							_this.page_data = data;
						} else if (type == 'bms_notice_baoxiu') {
							_this.page_data['bms_notice_baoxiu'] = data;
						} else if (type == 'bms_notice_baoxian') {
							_this.page_data['bms_notice_baoxian'] = data;
						} else if (type == 'renew') {
							_this.page_data['after_sales_price'] = data.after_sales_price;
							_this.page_data['insurance_price'] = data.insurance_price;
						}
					}
				});

				let config = [
					{
						k: 'renew',
						start: 'after_sale_start',
						end: 'after_sale_end',
						txt: 'bms_notice_baoxiu',
						price: 'after_sales_price',
					},
					{
						k: 'bx',
						start: 'insurance_start',
						end: 'insurance_end',
						txt: 'bms_notice_baoxian',
						price: 'insurance_price',
					},
				];

				config.forEach(_vv => {
					let k = _vv.k;
					let _s = _vv.start;
					let _e = _vv.end;
					let _t = _vv.txt;
					let _p = _vv.price;

					let tips = '保内';
					let tips_status = 1;
					let min = 15;
					let max_year = 3;

					let start_t = _this.happenTimeFun(_this.page_data[_s], 'y-m-d');
					let end_t = _this.happenTimeFun(_this.page_data[_e], 'y-m-d');

					let hasday = _this.compare_time(start_t, end_t);

					let hasyear = _this.compare_time(start_t, end_t, 'year');

					if (max_year > hasyear) {
						_this.page_show[k]['max_year'] = max_year - hasyear;
					} else {
						_this.page_show[k]['max_year'] = 0;
					}

					if (hasday < min) {
						tips = `售后保障${hasday}天后失效`;
						tips_status = 0;
					}

					_this.page_show[k]['start'] = start_t;
					_this.page_show[k]['end'] = end_t;
					_this.page_show[k]['txt'] = _this.page_data[_t];
					_this.page_show[k]['tips'] = tips;
					_this.page_show[k]['price'] = _this.page_data[_p];
				});

				_this.changeTab(_this.tabCurrentIndex);
				_this.render_req = true;
			});
		},
		//

		chang_number(type) {
			let _this = this;
			let max = _this.page_show[_this.page_type].max_year;
			if (type == 'add') {
				if (_this.inp_number < max) {
					// _this.inp_number = 1;
					_this.inp_number++;
				} else {
					return;
				}
			} else if (type == 'reduce') {
				if (_this.inp_number <= 1) {
					_this.inp_number = 1;
					return;
				} else {
					_this.inp_number--;
				}
			} else if (type == 'input') {
				if (_this.inp_number > max) {
					_this.inp_number = max;
				}
			}
			_this.com_get_price();

			// if (_this.inp_number == _this.spec_number) return

			// this.$emit('chang_number', { item: this.item, type, inp_number: this.inp_number });
		},

		com_get_price() {
			let _this = this;
			let end_price = _this.unit_price * _this.inp_number;
			_this.pay_end_price = _this.back_number(end_price);
		},

		//提交订单
		order_go() {
			let _this = this;
			if (!_this.com_loading({ status: 1, title: '正在加载...', mask: true })) return;
			let openId = uni.getStorageSync('openid');
			let data = this.page_form;

			data['openId'] = openId;
			data['method'] = _this.page_type;
			data['pay_year'] = _this.inp_number;
			// data['pay_year'] = _this.inp_number;

			_this.com_getdata({
				url: '/pay/index.aspx',
				data,
				id_name: 'uid',
				method: 'GET',
				data_handle_on: false,
				mode: 'pay',
				data_fun: function (res) {
					debugger;
					if (res.state == 'ok') {
						let data = res.data;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: function (res) {
								_this.hidepopup();
								_this.com_loading({ status: 2, title: '支付成功', mask: true });
								_this.$nextTick(() => {
									_this.pagerefresh();
								});
							},
							fail(err) {
								console.log(err);

								_this.hidepopup();
								_this.com_loading({ status: 2, title: '支付失败', mask: true, icon: 'error' });
							},
						});
					} else {
						_this.com_msg(res.msg);
					}
					_this.com_loading({ status: 0, time: 0 });
				},
			});
		},

		changeTab(e) {
			let _this = this;
			if (e == 0) {
				_this.page_type = 'renew';
			} else if (e == 1) {
				_this.page_type = 'bx';
			}
			_this.unit_price = _this.page_show[_this.page_type].price;
			_this.inp_number = 1;
			if (_this.unit_price > 0) {
				_this.com_bot_btn_class = '';
			} else {
				_this.com_bot_btn_class = 'dis';
			}
			_this.com_get_price();
		},

		openpopup(v) {
			let _this = this;

			if (_this.page_show[_this.page_type].max_year == 0) {
				_this.com_msg('已续保满三年');
				return;
			}
			this.popup_type = v;
			this.$nextTick(() => {
				this.pagepopup = true;
			});
		},

		hidepopup() {
			this.pagepopup = false;
		},
	},

	watch: {},
};
</script>

<style lang="scss">
.page_content {
	.type_top {
		padding: 0 30rpx;

		.cc {
			width: 100%;
			height: 296rpx;
			position: relative;
		}

		.bg {
			z-index: 2;
		}

		.top_text {
			z-index: 3;
			position: relative;
			padding: 30rpx 36rpx;

			.t1 {
				font-size: 52rpx;
				font-weight: bold;
				color: #ffffff;
				margin-bottom: 12rpx;
			}

			.tt {
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 36rpx;
			}
		}
	}

	.type_centent {
		padding: 30rpx 30rpx 0;

		.t1 {
			font-size: 32rpx;
			font-weight: 400;
			color: #ffffff;
		}

		.t2 {
			margin-top: 12rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}
}

.pay_centent {
	width: 750rpx;

	.pay_list {
		padding: 0 30rpx 50rpx;

		.pay_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx 0;

			.item_l {
				font-size: 32rpx;
				font-weight: 500;
				color: #999999;
				line-height: 36rpx;
			}

			.item_r {
				.tt {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					line-height: 36rpx;
				}
			}
		}
	}
}

.pay_btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10rpx 30rpx;

	.price_show {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.car_all_total {
		display: flex;
		align-items: flex-end;
		margin-right: 20rpx;
		line-height: 1.1;

		&.isdiscount {
			margin-top: 10rpx;
		}

		.cc {
			margin-right: 6rpx;
			font-size: 24rpx;
			color: #e30000;
		}

		.nn {
			font-size: 24rpx;
			color: #999999;
		}

		.tt {
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
			margin-right: 10rpx;
		}

		.pp {
		}
	}

	.btn {
		width: 345rpx;
		// --btn_height: 78rpx
	}
}
</style>
